<template>
    <div class="ChiCalendarbox-right">
        <div class="ChiCalendarbox-right-title">
            营销模版直通车
        </div>
        <div class="ChiCalendarbox-right-con">
            <div class="ChiCalendarbox-right-con-item" v-for="(item, index) in Heandlrarr" :key="index">
                <div class="ChiCalendarbox-right-con-item-title">
                    <span>{{ item.month }}月{{ item.day }}日</span>
                    <span v-if="item.day === timeObj.date">今天</span>
                    <span v-else>剩<span style="color: blue;">{{ item.day - timeObj.date }}</span>天</span>
                </div>
                <div class="ChiCalendarbox-right-con-item-con">
                    <span v-show="item.solarFestival !== undefined" class="solarFestival"
                        @click='MemorialClick(item.solarFestival)'><span>{{ item.solarFestival
                        }}</span></span>
                    <span v-show="item.term !== undefined" class="term" @click='MemorialClick(item.term)'><span>{{ item.term
                    }}</span></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// @ts-ignore
import LunarCalendar from 'lunar-calendar';
// 创建一个响应式对象，用于存储当前时间
let now = new Date();
const timeObj = reactive({
    // 获取当前年份
    year: +now.getFullYear(),
    // 获取当前月份，并将其转换为数字
    month: +now.getMonth() + 1,
    // 获取当前公历天日期
    date: now.getDate()
});

let Heandlrarr: any = reactive([]);

// 定义一个日期函数
const DateFunction = () => {

    // 获取当前月份的日历数据
    const Datelist = LunarCalendar.calendar(timeObj.year, timeObj.month, true);

    // 遍历每一个日历数据
    Datelist.monthData.forEach((item: any) => {
        // 如果该日历数据有节日或者term属性，并且该日大于当前时间
        if (item.solarFestival && item.solarFestival?.length < 8 || item.term) {
            if (item.day >= timeObj.date) {
                // 将该日历数据添加到Heandlrarr数组中
                Heandlrarr.push(item);
            }
        }
    });
};
// 调用日期函数
DateFunction();

// 定义一个事件发射器
const Emit = defineEmits(['RightMemorialClick']);
// 定义一个右 memories 事件函数
const MemorialClick = (type: string) => {
    // 发射右 memories 事件
    Emit('RightMemorialClick', type);
};

</script>

<style scoped lang="scss">
.ChiCalendarbox-right {
    width: 100%;
    height: 100%;

    .ChiCalendarbox-right-title {
        width: 80%;
        height: 10%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .ChiCalendarbox-right-con {
        width: 80%;
        height: 90%;
        margin: 0 auto;

        .ChiCalendarbox-right-con-item {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;

            .ChiCalendarbox-right-con-item-title {
                width: 100%;
                height: 25px;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .ChiCalendarbox-right-con-item-con {
                width: 90%;
                height: auto;
                margin: auto;

                >span {
                    display: flex;
                    width: 100%;
                    height: 30px;
                    background: #F5F7FB;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    border-radius: 10px;
                    font-size: 12px;
                    align-items: center;
                    font-weight: bold;
                    justify-content: center;
                }

                >span:hover {
                    color: blue;
                    cursor: pointer;
                }

                .solarFestival {
                    span {
                        width: 80%;
                        display: flex;
                        height: 12px;
                        border-left: 3px solid #F8AE15;
                        align-items: center;
                        padding-left: 5px;
                    }
                }

                .term {
                    span {
                        width: 80%;
                        display: flex;
                        height: 12px;
                        border-left: 3px solid #0EABA1;
                        align-items: center;
                        padding-left: 5px;
                    }
                }
            }
        }
    }

}
</style>